<template>
  <el-dialog
    v-model="dialogVisible"
    :title="announcement?.title || '公告详情'"
    width="700px"
    :close-on-click-modal="false"
    class="announcement-detail-dialog"
  >
    <div v-loading="loading" class="announcement-detail">
      <div v-if="announcement" class="detail-content">
        <!-- 公告头部信息 -->
        <div class="announcement-header">
          <div class="header-tags">
            <el-tag
              :type="utils.getTypeInfo(announcement.type).tagType"
              size="large"
              effect="plain"
            >
              <el-icon
                ><component :is="utils.getTypeInfo(announcement.type).icon"
              /></el-icon>
              {{ announcement.typeName }}
            </el-tag>
            <el-tag
              :type="utils.getLevelInfo(announcement.level).tagType"
              size="large"
            >
              {{ announcement.levelName }}
            </el-tag>
            <el-tag v-if="announcement.isTop" type="danger" size="large">
              <el-icon><Top /></el-icon>
              置顶
            </el-tag>
          </div>
          <div class="header-meta">
            <span class="meta-item">
              <el-icon><View /></el-icon>
              {{ utils.formatNumber(announcement.viewCount) }} 次浏览
            </span>
            <span class="meta-item">
              <el-icon><Clock /></el-icon>
              {{ utils.formatTime(announcement.publishTime) }}
            </span>
          </div>
        </div>

        <!-- 公告内容 -->
        <div class="announcement-content">
          <div class="content-text">
            {{ announcement.content }}
          </div>
        </div>

        <!-- 公告时间信息 -->
        <div class="announcement-time-info">
          <el-divider />
          <div class="time-info-row">
            <span class="time-label">发布时间：</span>
            <span class="time-value">{{
              utils.formatFullTime(announcement.publishTime)
            }}</span>
          </div>
          <div v-if="announcement.expireTime" class="time-info-row">
            <span class="time-label">过期时间：</span>
            <span class="time-value">
              {{ utils.formatFullTime(announcement.expireTime) }}
              <el-tag
                v-if="utils.isExpiringSoon(announcement.expireTime)"
                type="warning"
                size="small"
                style="margin-left: 8px"
              >
                即将过期
              </el-tag>
            </span>
          </div>
        </div>
      </div>

      <!-- 空状态 -->
      <el-empty v-else description="公告不存在或已被删除" />
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
        <el-button
          v-if="announcement && !announcement.read"
          type="primary"
          @click="handleMarkAsRead"
        >
          标记已读
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed, watch } from "vue";
import { ElMessage } from "element-plus";
import {
  Top,
  View,
  Clock,
  Bell,
  Star,
  Tools,
  InfoFilled
} from "@element-plus/icons-vue";
import {
  getAnnouncementDetailApi,
  markAnnouncementAsReadApi,
  UserAnnouncementUtils,
  type AnnouncementDetailInfo
} from "@/api/user-announcement";

// 工具类
const utils = UserAnnouncementUtils;

// Props
interface Props {
  visible: boolean;
  announcementId?: number;
}

const props = withDefaults(defineProps<Props>(), {
  announcementId: undefined
});

// Emits
const emit = defineEmits<{
  "update:visible": [value: boolean];
  read: [id: number];
}>();

// 状态
const loading = ref(false);
const announcement = ref<AnnouncementDetailInfo | null>(null);

// 计算属性
const dialogVisible = computed({
  get: () => props.visible,
  set: value => emit("update:visible", value)
});

// 监听对话框打开，加载公告详情
watch(
  () => props.visible,
  async newVal => {
    if (newVal && props.announcementId) {
      await loadAnnouncementDetail();
    }
  },
  { immediate: true }
);

// 加载公告详情
const loadAnnouncementDetail = async () => {
  if (!props.announcementId) return;

  loading.value = true;
  try {
    const response = await getAnnouncementDetailApi(props.announcementId);
    if (response.code === 200 && response.data) {
      announcement.value = response.data;
    } else {
      ElMessage.error(response.message || "加载公告详情失败");
      announcement.value = null;
    }
  } catch (error: any) {
    console.error("加载公告详情失败:", error);
    ElMessage.error(utils.formatErrorMessage(error));
    announcement.value = null;
  } finally {
    loading.value = false;
  }
};

// 标记已读
const handleMarkAsRead = async () => {
  if (!announcement.value) return;

  try {
    const response = await markAnnouncementAsReadApi(announcement.value.id);
    if (response.code === 200) {
      ElMessage.success("已标记为已读");
      announcement.value.read = true;
      emit("read", announcement.value.id);
    } else {
      ElMessage.error(response.message || "标记已读失败");
    }
  } catch (error: any) {
    console.error("标记已读失败:", error);
    ElMessage.error(utils.formatErrorMessage(error));
  }
};

// 关闭对话框
const handleClose = () => {
  dialogVisible.value = false;
  // 延迟清空数据，避免关闭动画时显示空白
  setTimeout(() => {
    announcement.value = null;
  }, 300);
};
</script>

<style scoped lang="scss">
/* 响应式设计 */
@media (width <= 768px) {
  .announcement-detail-dialog {
    :deep(.el-dialog) {
      width: 95% !important;
      margin: 0 auto;
    }

    :deep(.el-dialog__body) {
      max-height: 500px;
    }
  }

  .announcement-detail {
    .detail-content {
      .announcement-header {
        .header-meta {
          font-size: 13px;

          .meta-item {
            gap: 2px;
          }
        }
      }

      .announcement-content {
        padding: 15px;

        .content-text {
          font-size: 14px;
        }
      }

      .announcement-time-info {
        .time-info-row {
          flex-direction: column;
          gap: 4px;
          align-items: flex-start;

          .time-label {
            min-width: auto;
          }
        }
      }
    }
  }
}

.announcement-detail-dialog {
  :deep(.el-dialog__body) {
    max-height: 600px;
    padding: 20px;
    overflow-y: auto;
  }
}

.announcement-detail {
  .detail-content {
    .announcement-header {
      margin-bottom: 20px;

      .header-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
        margin-bottom: 12px;

        .el-tag {
          display: inline-flex !important;
          gap: 4px;
          align-items: center !important;
          justify-content: center;
          height: 24px;
          padding: 0 8px !important;
          font-size: 13px !important;
          font-weight: 500 !important;
          line-height: 1 !important;

          :deep(span) {
            display: flex;
            align-items: center;
            font-size: 13px !important;
            font-weight: 500 !important;
            line-height: 1 !important;
          }

          .el-icon {
            display: flex;
            align-items: center;
            margin: 0;
            font-size: 13px !important;
          }
        }
      }

      .header-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        font-size: 14px;
        color: #909399;

        .meta-item {
          display: flex;
          gap: 4px;
          align-items: center;

          .el-icon {
            font-size: 16px;
          }
        }
      }
    }

    .announcement-content {
      padding: 20px;
      margin-bottom: 20px;
      background-color: #f0f9ff;
      border-radius: 8px;

      .content-text {
        font-size: 15px;
        line-height: 1.8;
        color: #0c4a6e;
        word-break: break-word;
        white-space: pre-wrap;
      }
    }

    .announcement-time-info {
      .time-info-row {
        display: flex;
        align-items: center;
        margin-bottom: 8px;
        font-size: 14px;

        .time-label {
          min-width: 80px;
          color: #909399;
        }

        .time-value {
          display: flex;
          align-items: center;
          color: #606266;
        }

        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
}

.dialog-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}
</style>
